// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
@use 'includes/lib' as *;


// * -------------------------------------------------------------------------- */
// Guarantee / Availability Copy

.availability-copy,
.guarantee-copy {
    @include text-body-md;
}

.guarantee-copy {
    color: $color-vpn-brand-violet;
    font-weight: bold;
    margin-bottom: $spacing-lg;

    &::before {
        @include bidi((
            (background-position, top left, top right),
            (padding-right, $spacing-xs, padding-left, 0),
        ));
        background-image: url('/media/img/products/vpn/common/check.svg');
        background-repeat: no-repeat;
        content: '';
        display: inline-block;
        height: 16px;
        position: relative;
        top: 2px;
        width: 16px;
    }

    &::after {
        @include bidi((
            (padding-left, 0.1em, padding-right, 0),
        ));
        content: '*';
    }

    a:link,
    a:visited {
        color: inherit;
        text-decoration: none;
    }

    a:hover,
    a:active,
    a:focus {
        text-decoration: underline;
    }
}

.vpn-features-guarantee {
    &::after {
        @include bidi((
            (padding-left, 0.1em, padding-right, 0),
        ));
        content: '*';
    }
}

.refund-policy {
    margin-bottom: 0;
}

// * -------------------------------------------------------------------------- */
// VPN Nav Button

.vpn-nav-cta {
    .mzp-c-cta-link {
        @include text-body-sm;
        display: block;
        margin-top: $spacing-lg;

        &:link,
        &:visited {
            color: $color-black;
            text-decoration: none;
        }

        &:hover,
        &:active,
        &:focus {
            text-decoration: underline;
        }
    }

    @media #{$mq-md} {
        @include bidi(((text-align, left, right),));
        margin-top: 0;

        .mzp-c-cta-link {
            @include bidi(((margin-left, $spacing-md, margin-right, 0),));
            display: inline;
        }
    }
}

// * -------------------------------------------------------------------------- */
// Page VPN Button

main .mzp-c-button.mzp-t-xl {
    @include font-size(18px);
    margin-bottom: $spacing-lg;
}

// The hover / focus color for secondary protocol button colors is the same as the
// VPN container background color, which creates an a11y issue. So set the button
// background color to white to give a better contrast change.
.vpn-pricing-variable-plans .mzp-c-button.mzp-t-secondary,
.vpn-download-list .mzp-c-button.mzp-t-secondary {
    background: $color-white;
}

// * -------------------------------------------------------------------------- */
// VPN Product Feature List

.vpn-feature-list.mzp-u-list-styled {
    @include bidi((
        (margin-left, 0, margin-right, 0),
        (text-align, left, right),
    ));
    @include text-body-lg;
    display: inline-block;
    list-style: none;
    margin-bottom: $spacing-lg;

    li {
        @include bidi((
            (background-position, top 3px left, top 3px right),
            (padding-left, (18px + $spacing-sm), padding-right, 0),
        ));
        background: url('/media/img/products/vpn/common/check-black.svg') no-repeat;
    }

    &.l-columns-two {
        margin-bottom: $layout-lg;

        @media #{$mq-md} {
            column-count: 2;
            column-gap: $spacing-2xl;
            margin-bottom: $layout-xl;
        }
    }

    @media #{$mq-lg} {
        @include text-body-xl;
        margin-bottom: 0;

        li {
            @include bidi((
                (background-position, top 7px left, top 7px right),
                (padding-left, (18px + $spacing-md), padding-right, 0),
            ));
        }
    }
}

// * -------------------------------------------------------------------------- */
// Page Footer

.vpn-footer {
    margin: 0 auto $layout-xl;
    text-align: center;

    .guarantee-copy,
    .availability-copy {
        margin-bottom: 0;
    }
}

.vpn-footer-list {
    a:link,
    a:visited {
        @include text-body-xs;
    }
}

// * -------------------------------------------------------------------------- */
// Platform pages

.platform-article {
    padding-top: 0;
}

.c-vpn-platform-footer {
    text-align: center;

    .mzp-c-wordmark {
        margin-left: auto;
        margin-right: auto;
        background-position: center;
    }
}
